<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <!-- <meta name="viewport" content="width=device-width, initial-scale=1.0"> -->
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  <title>登录</title>
  <style>
    * {
      padding: 0;
      margin: 0;
    }

    div {
      display: block;
    }

    .top {
      width: 100%;
      height: 100px;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .zuipin-warp {
      width: 1226px;
      height: 46px;
    }

    .top-login .zuipin-logo {
      margin: 34px auto;
      width: 1226px;
      height: 46px;
    }

    .top-login .zuipin-logo img {
      display: block;
      width: 292px;
      height: 46px;
    }

    .center {
      width: 100%;
      /* background-color: red; */
    }

    .center .left-img img {
      display: block;
      width: 820px;
      height: 585px;
      /* margin: 0 auto; */
    }

    .center .center-box {
      /* text-align: center; */
      width: 1226px;
      margin: 0 auto;
      position: relative;
    }

    .footer {
      width: 100%;
      height: 225px;
      /* background-color: yellow; */
    }

    .footer img,
    span {
      display: block;
    }

    .footer .one img {
      width: 32px;
      height: 32px;
    }

    .footer .one sapn {
      width: 68px;
      height: 32px;
      font-size: 14px;
    }

    .footer .footer-box {
      width: 1226px;
      margin: 0 auto;
      position: relative;
    }

    .footer .one ul {
      width: 1226px;
      height: 32px;
      margin-top: 30px;
      display: flex;
      justify-content: space-between;
    }

    .footer .one ul li {
      width: 152px;
      height: 32px;
      list-style: none;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .footer .tow {
      width: 1226px;
      display: flex;
      justify-content: space-betwee;
    }

    .footer .tow .box {
      width: 12.5%;
      height: 145px;
      margin-top: 30px;
    }

    .footer .tow .box ul {
      width: 100%;
      height: 145px;
    }

    .footer .tow .box ul li {
      display: block;
      list-style: none;
      width: 137px;
      height: 17px;
      margin-top: 8px;
      display: flex;
      justify-content: left;
      /* align-items: center; */
    }

    .footer .tow .box ul li span {
      display: block;
      font-size: 14px;
      line-height: 1.25;
    }

    .footer .tow .box ul li a {
      text-decoration: none;
      display: block;
      width: 60px;
      height: 13px;
      color: #333;
      font-size: 12px;
      margin-top: 13px;
    }

    .footer .phone {
      display: block;
      height: 24px;
      margin-top: 35px;
      text-align: center;
      color: #ff3600;
    }

    .footer .time {
      font-size: 12px;
      text-align: center;
      margin-top: 10px;
    }

    .footer .tow img {
      width: 120px;
      height: 122px;
    }

    .last {
      width: 100%;
      background-color: #333333;
      padding-top: 30px;
      padding-bottom: 30px;
    }

    .last .last-div {
      width: 1226px;
      margin: 0 auto;
      position: relative;
    }

    .last .last-div .box {
      float: left;
    }

    .last .last-div .box div {
      margin-top: 5px;
    }

    .last .last-div .box img {
      width: 60px;
      height: 60px;
    }

    .last .last-div ul {
      overflow: hidden;
    }

    .last .last-div li {
      list-style: none;
      font-size: 12px;
      float: left;
    }

    .last .last-div li a {
      text-decoration: none;
      padding: 0 15px;
      color: #b0b0b0;
    }

    .last .last-div li b {
      color: #666;
    }

    /* a:hover {
        color: red;
      } */

    .last .last-div span {
      color: #b0b0b0;
      font-size: 12px;
    }

    .last .last-div a {
      color: #b0b0b0;
      text-decoration: none;
      font-size: 12px;
    }

    .last .last-div .cbox {
      margin: 18px 50px 18px 50px;
      float: left;
    }

    .last .last-div .cdiv img {
      display: flex;
      justify-content: space-around;
    }

    .last .last-div .rbox {
      color: #0b0b0b;
      width: 538px;
      height: 60px;
      display: flex;
      justify-content: space-between;
    }

    .last .last-div .rbox div {
      width: 25%;
      height: 35px;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .last .last-div .rbox img {
      width: 30px;
      height: 30px;
    }


    #login {
      width: 380px;
      height: 524px;
      margin: 30px 0 0 20px;
      background-color: #FFFFFF;
      border: 1px solid black;
      position: relative;
    }

    #login>div>div:last-child {
      width: 316px;
      margin: 0 auto;
    }

    #login>div>div:first-child>span {
      display: inline-block;
      width: 168px;
      height: 24px;
      font-size: 20px;
      text-align: center;
      color: #333333;
      margin: 30px 0;
    }

    #login>div>div:first-child>span.active {
      color: red;
    }

    /* 没有 active 样式的, 隐藏 */
    #login>div>div:last-child>div:not(.active) {
      display: none;
    }

    #login>div>div:last-child input {
      width: 297px;
      height: 40px;
      margin-bottom: 15px;
      padding-left: 15px;
      border: 1px solid #cbcbcb;
    }

    #login>div>div:last-child .yz {
      width: 179px;
      height: 40px;
      margin-bottom: 15px;
    }

    /* 立即登录 */
    #login>div>div:last-child button {
      width: 100%;
      height: 40px;
      margin-bottom: 15px;
    }

    #login>div>div:last-child .yzb {
      width: 108px;
      height: 40px;
      margin-bottom: 15px;
    }

    #login a {
      text-decoration: none;
      color: #999;
      float: right;
      display: block;
    }

    #login p {
      text-align: center;
      color: #999;
      font-size: 14px;
    }

    #login-other {
      width: 100%;
      /* background-color: red; */
      bottom: 30px;
      position: absolute;
    }

    .box {
      position: relative;
      /* padding-top: 10px; */
      margin-bottom: 15px;
    }

    .pos {
      position: absolute;
      left: 50%;
      width: 100px;
      height: 20px;
      margin-left: -50px;
      background-color: #fff;
      color: #999999;
      top: -18px;
      line-height: 40px;
      text-align: center;
    }

    #login-other>div:last-child {
      display: flex;
      justify-content: space-between;
    }

    #login-other img {
      display: block;
      width: 30px;
      height: 30px;
    }
  </style>
</head>

<body>
  <div>
    <div class="top">
      <div class="top-login">
        <div class="zuipn-warp">
          <a href="https://zuipin.cn/">
            <div class="zuipin-logo">
              <img src="../img/logo.png" alt="" />
            </div>
          </a>
        </div>
      </div>
    </div>
    <!-- 中间 -->
    <div class="center" style="background: rgb(32, 42, 20);width: 100%;">
      <div class="center-box" style="display:flex;justify-content: space-between;">
        <!-- 左边图片 -->
        <div class="left-img">
          <a href="#">
            <img src="../img/20210309登录页-202a14.jpg" alt="" />
          </a>
        </div>
        <!-- 右边登录框 -->
        <div id="login">
          <div>
            <div>
              <span data-id="tab1" class="active">短信登陆</span>
              <b>|</b>
              <span data-id="tab2">账号登陆</span>
            </div>
            <div>
              <div id="tab1" class="active">
                <input type="text" placeholder="手机号码">
                <input class="yz" type="text" placeholder="图片验证码">
                <button class="yzb">图片验证</button>
                <input class="yz" type="text" placeholder="短信验证码">
                <button class="yzb">获取验证码</button>
                <button>立即登录</button>
                <p>若无账号，使用验证码登录成功后默认创建账号</p>
              </div>
              <div id="tab2">
                <input type="text" placeholder="邮箱/手机号码">
                <input type="text" placeholder="密码">
                <button id="dl">立即登录</button>
                <a href="">忘记密码？</a>
              </div>
            </div>
          </div>
          <div id="login-other">
            <div class="box">
              <div class="pos">其他登录方式</div>
              <hr>
            </div>
            <div>
              <a href="">
                <img src="../img/login.htnl/支付宝.png" alt="">
              </a>
              <a href="">
                <img src="../img/login.htnl/QQ.png" alt="">
              </a>
              <a href="">
                <img src="../img/login.htnl/微信.png" alt="">
              </a>
            </div>
          </div>
        </div>

        <script src="../vendor/jquery-3.6.0.js"></script>
        <script>
          $('#login>div>div:eq(0)>span').click(function () {
            $(this).addClass('active').siblings().removeClass('active')

            const id = $(this).data('id') //读取标题上存储的自定义属性
            // 假设 id='tab1',  
            // 下方拼接出的 '#tabs #tab1'
            $(`#login #${id}`).addClass('active').siblings().removeClass('active')


          })
          $('#dl').click(function () {
            const url = 'http://127.0.0.1:3000/v1/users/login'

            const phone = $('#tab2 input').eq(0).val()
            const upwd = $('#tab2 input').eq(1).val()

            const p = { phone, upwd }
            console.log(p)
            $.post(url, p, data => {
              console.log(data)
              return
            })
          })
        </script>

      </div>
    </div>

    <div class="footer">
      <div class="footer-box">
        <!-- 第一行 -->
        <div class="one">
          <ul>
            <li>
              <img src="../img/img-small/01.png" alt="" />
              <span>原产地直供</span>
            </li>
            <li>
              <img src="../img/img-small/02.png" alt="" />
              <span>1000家合作社联盟</span>
            </li>
            <li>
              <img src="../img/img-small/03_10w.png" alt="" />
              <span>10万亩茶园直供</span>
            </li>
            <li>
              <img src="../img/img-small/04_90day.png" alt="" />
              <span>90天商品保价</span>
            </li>
            <li>
              <img src="../img/img-small/05.png" alt="" />
              <span>30天商品退换货</span>
            </li>
            <li>
              <img src="../img/img-small/06.png" alt="" />
              <span>满59元免运费</span>
            </li>
          </ul>
        </div>
        <!-- 第二行 -->
        <div class="tow">
          <div class="box">
            <ul>
              <li>购物指南</li>
              <li>
                <a href="#">购物保障</a>
              </li>
              <li>
                <a href="#">积分政策</a>
              </li>
              <li>
                <a href="#">企业用户</a>
              </li>
            </ul>
          </div>
          <div class="box">
            <ul>
              <li>配送方式</li>
              <li>
                <a href="#">快递资费</a>
              </li>
              <li>
                <a href="#">配送时间</a>
              </li>
              <li>
                <a href="#">配送范围</a>
              </li>
              <li>
                <a href="#">验货签收</a>
              </li>
            </ul>
          </div>
          <div class="box">
            <ul>
              <li>支付方式</li>
              <li>
                <a href="#">货到付款</a>
              </li>
              <li>
                <a href="#">在线支付</a>
              </li>
              <li>
                <a href="#">网银在线</a>
              </li>
              <li>
                <a href="#">银行转账</a>
              </li>
            </ul>
          </div>
          <div class="box">
            <ul>
              <li>售后服务</li>
              <li>
                <a href="#">退换货原则</a>
              </li>
              <li>
                <a href="#">退换货要求</a>
              </li>
              <li>
                <a href="#">运费规则</a>
              </li>
              <li>
                <a href="#">退换货流程</a>
              </li>
            </ul>
          </div>
          <div class="box">
            <ul>
              <li>关于醉品</li>
              <li>
                <a href="#">关于我们</a>
              </li>
              <li>
                <a href="#">醉品动态</a>
              </li>
              <li>
                <a href="#">媒体声音</a>
              </li>
              <li>
                <a href="#">品牌集成</a>
              </li>
            </ul>
          </div>

          <div class="box">
            <span class="phone">4006-066-068</span>
            <span class="time">周一至周五 08:40-18:00</span>
          </div>
          <div class="box">
            <img src="../img/img-small/20200422wxkf.jpg" alt="" />
            <span>扫码添加客服微信</span>
          </div>
          <div class="box">
            <img src="../img/img-small/phone_qr.png" alt="" />
            <span>醉品茶城手机版</span>
          </div>
        </div>
      </div>
    </div>
    <!-- 底部栏 -->
    <div class="last">
      <div class="last-div">
        <div class="box">
          <img src="../img/zui.png" alt="" />
        </div>
        <div class="box">
          <div>
            <ul>
              <li>
                <a href="">关于我们</a>
                <b>|</b>
              </li>
              <li>
                <a href="">版权声明</a>
                <b>|</b>
              </li>
              <li>
                <a href="">联系我们</a>
                <b>|</b>
              </li>
            </ul>
          </div>
          <div>
            <span>© 2010 - 2022 醉品茶城 厦门品茶集网络科技有限公司</span>
          </div>
          <div style="display: flex; justify-content: space-between">
            <span>zuipin.cn All Rights Reserved</span>
            <a href="">闽ICP备10200063号-1</a>
          </div>
        </div>
        <div class="cbox">
          <img src="../img/pincha.png" alt="" />
        </div>

        <div class="rbox">
          <div>
            <img src="../img/两岸茶.png" alt="" />
            <a href="#">海峡两岸茶业交流协会互联网分会</a>
          </div>
          <div>
            <img src="../img/315.jpg" alt="" />
            <a href="#">315安全服务保障认证</a>
          </div>
          <div>
            <img src="../img/可信.png" alt="" />
            <a href="#">可信网站示范企业</a>
          </div>
          <div>
            <img src="../img/logo工商执照.png" alt="" />
            <a href="#">工商执照经营允许</a>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>

</html>